<template>
  <!-- 轮播图 -->
  <el-carousel
    height="400px"
    direction="vertical"
    type="card"
    motion-blur
    style="margin-bottom: 20px"
  >
    <el-carousel-item v-for="item in 3" :key="item"> </el-carousel-item>
  </el-carousel>
  <nav>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="管理员管理">
        <div class="container">
          <div class="box1">
            <el-input type="text" placeholder="查找姓名" />
            <el-button type="info" plain>搜索</el-button>
          </div>
          <div class="box2">
            <el-button type="success" plain>增加管理员</el-button>
          </div>
        </div>
        <!-- 表格信息 -->
        <el-table :data="authorData" stripe style="width: 100%" fit>
          <el-table-column type="index" width="50" />
          <el-table-column prop="username" label="姓名" align="center" />
          <el-table-column prop="nickname" label="昵称" align="center" />
          <el-table-column prop="password" label="密码" align="center" />
          <el-table-column prop="gender" label="性别" align="center" />
          <el-table-column
            prop="periodicalNumber"
            label="发布的稿件数"
            align="center"
          /><el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          /><el-table-column
            prop="updateTime"
            label="修改时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="150"
            align="center"
          >
            <template #default>
              <el-button link type="danger" size="small">封禁用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="1000"
        />
      </el-tab-pane>

      <el-tab-pane label="封号管理员">
        <div class="container">
          <div class="box1">
            <el-input type="text" placeholder="查找姓名" />
            <el-button type="info" plain>搜索</el-button>
          </div>
        </div>
        <!-- 表格信息 -->
        <el-table :data="banedData" stripe style="width: 100%" fit>
          <el-table-column type="index" width="50" />
          <el-table-column prop="username" label="姓名" align="center" />
          <el-table-column prop="nickname" label="昵称" align="center" />
          <el-table-column prop="password" label="密码" align="center" />
          <el-table-column prop="gender" label="性别" align="center" />
          <el-table-column
            prop="periodicalNumber"
            label="发布的稿件数"
            align="center"
          /><el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          /><el-table-column
            prop="updateTime"
            label="修改时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="150"
            align="center"
          >
            <template #default>
              <el-button link type="success" size="small">解封</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="1000"
      /></el-tab-pane>
    </el-tabs>
  </nav>
</template>
<script setup>
</script>

<style scoped>
.el-carousel__item:nth-child(3n) {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("@/assets/images/1.jpg");
}

.el-carousel__item:nth-child(3n + 1) {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("@/assets/images/2.jpg");
}
.el-carousel__item:nth-child(3n + 2) {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("@/assets/images/3.jpg");
}

::v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active),
::v-deep(
    .el-tabs--border-card
      > .el-tabs__header
      .el-tabs__item:not(.is-disabled):hover
  ) {
  color: var(--jiqiu-color);
}

/* 标签页内部元素样式 */
.container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 水平方向上均匀分布剩余空间，使box2靠右 */
}

.box1 {
  display: flex; /* 输入框和按钮水平排列 */
  align-items: center; /* 垂直居中 */
}

.box1 .el-input,
.box1 .el-button,
.box2 .el-button {
  margin-right: 5px; /* 输入框和按钮之间的间距 */
}

/* 最后一个按钮不需要右边距 */
.box2 .el-button:last-child {
  margin-right: 0;
}

/* 输入框样式 */
::v-deep(.el-input__wrapper.is-focus) {
  box-shadow: inset 0 0 0 1px var(--jiqiu-color);
}
</style>
